<template>
    <div class="container">
        <div class="warp">
            <ComNav title="歌曲列表" moreLink="/discover/playlist/" moreText="" :showIcon="false" :hideBackground="true" />
            <ComCardList :list="recommendList" :limit="10" />
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" prev-text="上一页" next-text="下一页" :total="1000" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import ComNav from '../components/ComNav.vue'
import ComCardList from '../components/ComCardList.vue'

const recommendList = [
    {
        id: 1,
        name: '古典清香 I 我的茶馆里住着巴赫与肖邦',
        picUrl: 'http://p2.music.126.net/QcPJfzds8ejF1FPgBaXMTw==/109951163128461676.jpg?param=140y140',
        playCount: 33680000,
        hasIcon: false
    },
    {
        id: 2,
        name: '宝藏挖掘机|分享好音乐和金曲',
        picUrl: 'http://p2.music.126.net/whuiVDHL3a-OE8q4mcj5xA==/109951169484809780.jpg?param=140y140',
        playCount: 99810000,
        hasIcon: false
    },
    {
        id: 3,
        name: '欧美万评优质女声•萦绕耳畔忆于心间',
        picUrl: 'http://p2.music.126.net/ptx2Jf4PZl3oNLxv4NiADg==/109951164018765577.jpg?param=140y140',
        playCount: 40330000,
        hasIcon: false
    },
    {
        id: 4,
        name: '好妹妹乐队聊18岁：听见人生的第一次迷茫',
        picUrl: 'http://p2.music.126.net/6ICIS6VJ64gk9nYptGRTIg==/109951170984015005.jpg?param=140y140',
        playCount: 15950,
        hasIcon: true
    },
    {
        id: 5,
        name: '戳爷/黄老板/断眉/萌德/骚姆/比伯/烟卷',
        picUrl: 'http://p2.music.126.net/sOWvFHC7alSUXHxmsTr1bQ==/109951163610820733.jpg?param=140y140',
        playCount: 45790000,
        hasIcon: false
    },
    {
        id: 6,
        name: '不是惩罚，而是【看见】：我儿子让我在霸凌这堂课中恍然大悟',
        picUrl: 'http://p2.music.126.net/LUyh3T4skewjTYUab8k24Q==/109951170980235468.jpg?param=140y140',
        playCount: 1577,
        hasIcon: true
    },
    {
        id: 7,
        name: '助眠辑 | 自然音，伴灵动乐符萦绕耳畔',
        picUrl: 'http://p2.music.126.net/sixunTcvD_IXeVqxZnpHkA==/109951163452086313.jpg?param=140y140',
        playCount: 30200000,
        hasIcon: true
    },
    {
        id: 8,
        name: '唯一 (抖音DJ热播版)',
        picUrl: 'http://p1.music.126.net/EGrmZoSgGXAsMKq0Wwbhlg==/109951170614898959.jpg?param=140y140',
        playCount: 730000,
        hasIcon: true
    }
];
</script>

<style lang="scss" scoped>
.container {
    width: 980px;
    min-height: 700px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    border-width: 0 1px;

    .warp {
        padding: 40px;

        .pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 50px 0 20px 0;
            text-align: center;
        }
    }
}
</style>